<template>
  <div>
    <div class="shopcar">
      <button class="goback" @click="$router.go(-1)">返回</button>
      <h4 class>购物车实现</h4>
      <div class="shopcar-content">
        <span class="el-icon-remove" @click="sub"></span>
        <i class="content" v-if="content>=0">{{content}}</i>
        <span class="el-icon-circle-plus" @click="add"></span>
        <div class="sum">总数：{{content}}</div>
      </div>
    </div>
    <!-- better-scroll -->
    <div>better-scroll</div>
    <div class="better-scroll" ref="wraper">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
      </ul>
    </div>
    <div class="backstage">
      <div>
        <el-radio-group v-model="direction"></el-radio-group>
        <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">点我打开后台</el-button>
        <el-drawer
          title="简单的后台"
          size="60%"
          :visible.sync="drawer"
          :direction="direction"
          :before-close="handleClose"
        >
          <span>星级评分</span>
          <div class="star">
            <span class="star-item" :class="item" v-for="(item,index) in itemClass" :key="index"></span>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script>
const LENGTH = 5;
const CLS_ON = "on";
const CLS_OFF = "off";
const CLS_HALF = "half";
import BScroll from "better-scroll";
export default {
  data() {
    return {
      drawer: false,
      direction: "rtl",
      score: 4.7,
      content: 0,
    };
  },
  methods: {
    sub() {
      this.content--;
    },
    add() {
      this.content++;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wraper, {});
    });
  },
  computed: {
    itemClass() {
      let result = [];
      // 4.5
      let score = Math.floor(this.score * 2) / 2;
      // console.log(score);
      // 半星 4.5除以1的余数不等于0
      let half = score % 1 !== 0;
      // 整星 向下取整
      let on = Math.floor(score);
      // console.log(on);
      // 拿到全星
      for (var i = 0; i < on; i++) {
        result.push(CLS_ON);
      }
      // 半星
      if (half) {
        result.push(CLS_HALF);
      }
      // 补全
      while (result.length < LENGTH) {
        result.push(CLS_OFF);
      }
      return result;
    },
  },
};
</script>
<style lang="less" scoped>
.backstage {
  position: absolute;
  top: 61px;
  left: 60%;
  margin-right: 40px;
}
.star-item {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-size: 10px 10px;
  background-repeat: no-repeat;
}
.star .on {
  background-image: url(./img/star24_on@2x.png);
}
.star .off {
  background-image: url(./img/star24_off@2x.png);
}
.star .half {
  background-image: url(./img/star24_half@2x.png);
}
.shopcar .shopcar-content {
  width: 50%;
  height: 400px;
  background-color: #eee;

  .content {
    padding: 15px;
  }
}
.better-scroll {
  height: 100px;
  background: rosybrown;
  z-index: 99;
}
.goback {
  cursor: pointer;
}
</style>